<template>
  <div id="createActiveList">
    <div class="bottom-box">
      <!--table-->
      <div class="table">
        <h1 class="con-right-title">
          <i class="fa fa-reply" @click="cancel"></i>
          投票活动/{{ title }}
        </h1>
        <!--下部tab-->
        <el-row>
          <!-- <div class="phone-box">
            <div class="page-phone">
              <component :is="phonePage" @changePhone="changePhone"></component>
            </div>
          </div> -->
          <el-tabs
            v-model="activeName"
            type="border-card"
            @tab-click="handleClick"
          >
            <el-tab-pane
              v-for="item in tabList"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
              <component
                ref="comTab"
                :id="id"
                :is="item.name"
                :type="type"
                :subData="subData"
                :conTypeList="conTypeList"
                :userRulList="userRulList"
                :touchSettingList="touchSettingList"
                :prizeLists="prizeLists"
                :backPage="backPage"
                @changeLab="changeLab"
                @getUserRulList="getUserRulList"
                @getTouchSettingList="getTouchSettingList"
                @getPrizeList="getPrizeList"
              ></component>
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import {
  getUserRul,
  getTouchSetting,
  getSubFormData,
  getPrize
} from '@component/activeManagement/common/js/lableApi' // 导入公用方法
import actionFile from '@component/activeManagement/common/templatePage/actionFile' // 活动档案
import actionShow from '@component/activeManagement/common/templatePage/actionShow' // 活动展示
import actionRule from '@component/activeManagement/votingActivity/createActivities/actionRule' // 活动规则
import userRule from '@component/activeManagement/votingActivity/createActivities/userSetting' // 预设用户设置
import touchSetting from '@component/activeManagement/common/templatePage/touchSetting' // 触达设置
import prizeSetting from '@component/activeManagement/common/templatePage/prizeSetting' // 奖品配置
import allocatedManage from '@component/activeManagement/common/templatePage/allocatedManagement/allocatedManage' // 发奖管理
import actionFilePhone from '@component/activeManagement/common/phonePage/actionFilePhone' // 活动档案-phone
import actionShowPhone from '@component/activeManagement/common/phonePage/actionShowPhone' // 活动展示-phone
import touchSettingPhone from '@component/activeManagement/common/phonePage/touchSettingPhone' // 触达设置-phone
import activityPages from '@component/activeManagement/common/phonePage/activityPages' // 活动展示-参与-phone
import pageDetail from '@component/activeManagement/common/phonePage/pageDetail' // 活动展示-活动详情-phone
export default {
  // name: 'CreateActiveList',
  msg: '投票活动-创建活动',
  components: {
    actionFile,
    actionShow,
    actionRule,
    userRule,
    touchSetting,
    prizeSetting,
    allocatedManage,
    actionFilePhone,
    actionShowPhone,
    touchSettingPhone,
    activityPages,
    pageDetail
  },
  data() {
    return {
      title: '',
      type: '', //类型
      id: '', //活动id
      activeName: 'actionFile',
      phonePage: 'actionFilePhone',
      backPage: 'votingActivityList', //返回页面
      tabList: [
        {
          title: '活动档案',
          name: 'actionFile'
        },
        {
          title: '活动展示',
          name: 'actionShow'
        },
        {
          title: '活动规则',
          name: 'actionRule'
        },
        {
          title: '预设用户设置',
          name: 'userRule'
        },
        {
          title: '触达设置',
          name: 'touchSetting'
        },
        {
          title: '奖品配置',
          name: 'prizeSetting'
        },
        {
          title: '发奖管理',
          name: 'allocatedManage'
        }
      ],
      subData: {},
      defaultData: {
        //活动档案/活动展示/活动规则数据
        activityInfo: {
          type: 'VOTE_ACTIVITY', //活动类型 OFFICIAL_SELF_JUDGE_ACTIVITY：官方自评活动；QUESTIONNAIRE_ACTIVITY：调查问卷活动；VOTE_ACTIVITY：投票活动;BELOW_THE_LINE_ACTIVITY：线下汇报活动;RANKING_LIST_ACTIVITY：排行榜活动
          name: '', // 活动名称
          describe: '', // 活动描述
          remark: '', // 备注
          source: 'OTHER' //活动来源OTHER写死
        },
        activityDisplay: {
          displayName: '', // 展示名称
          cover: '', // 活动封面
          detailPagesSwitch: true,
          linkContentType: {
            //内容类型
            type: ''
          },
          detailPagesURL: '', // 详情h5链接
          backdropURL: '', // 活动说明背景图
          endDetailPagesURL: '' // 活动结束详情h5链接
        },
        rules: {
          submitPostsStartDate: '',
          submitPostsEndDate: '',
          voteRules: {
            //投票规则
            dailyVoteNumber: 1, //每人每日可投票数
            endDate: '', //投票结束时间yyyy-MM-dd hh:mm:ss
            startDate: '', //投票开始时间yyyy-MM-dd hh:mm:ss
            sumVoteNumber: 1, //每人可为几人投票
            type: 'DAILY_VOTE' //投票形式: 每人每日均可投票 DAILY_VOTE; 一次性投票 SUM_VOTE
          }
        },
        reachs: {
          status: true
        }
      },
      prizeLists: {}, //奖品配置
      defaultPrizeList: {
        id: '', //奖品配置id
        relevanceId: '', //关联的类型Id,如活动Id
        relevanceType: 'ACTIVITY', //关联的类型 type,活动传：ACTIVITY
        endDate: '',
        startDate: '',
        createTime: [],
        url: '',
        awards: [
          {
            name: '',
            prizeAmount: '',
            userCount: '0',
            entityPrizes: [{ name: '', money: '0', remark: '' }],
            virtualPrizes: [{ name: '', money: '0', remark: '' }],
            prizes: []
          }
        ]
      },
      conTypeList: [], //活动展示-内容类型列表
      userRulList: [], //预设用户规则列表
      touchSettingList: [] //触达设置列表
    }
  },
  watch: {
    activeName(labName, oldV) {
      switch (labName) {
        case 'actionFile':
          this.phonePage = 'actionFilePhone'
          break
        case 'actionShow':
          this.phonePage = 'actionShowPhone'
          break
        default:
          this.phonePage = 'touchSettingPhone'
          break
      }
    },
    '$route.path': 'init'
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let name = this.$route.name
      this.id = this.$route.query.id
      let title = ''
      switch (name) {
        case 'wh:activeManagement:votingActivity:createActivities':
          title = '创建活动'
          this.type = 'add'
          this.subData = { ...this.defaultData }
          break
        case 'wh:activeManagement:votingActivity:editVotingActivities':
          title = '编辑活动'
          this.type = 'edit'
          break
        case 'wh:activeManagement:votingActivity:checkVotingActivities':
          title = '查看详情'
          this.type = 'check'
          let backPage = sessionStorage.getItem(`check${this.id}`)
          if (backPage) {
            this.backPage = backPage
          }
          break
      }
      this.title = title
      this.getConTypeList()
      this.getUserRulList()
      this.getTouchSettingList()
      this.getSubData()
      this.getPrizeList()
    },
    /*获取内容类型列表*/
    async getConTypeList() {
      this.conTypeList = await sysNormalDisable('link_content_type')
    },
    /*获取预设用户列表*/
    async getUserRulList() {
      this.userRulList = await getUserRul(this.id)
    },
    /*获取触达列表*/
    async getTouchSettingList() {
      this.touchSettingList = await getTouchSetting(this.id)
    },
    /*获取 活动档案/活动展示/活动规则数据*/
    async getSubData() {
      this.subData = await getSubFormData(this.id)
    },
    /*获取奖品配置列表*/
    async getPrizeList() {
      let list = await getPrize(this.id)
      if (list.startDate) {
        this.prizeLists = list
        this.$set(this.prizeLists, 'createTime', [list.startDate, list.endDate])
        this.$store.commit('setPrizeId', {
          activeId: this.id,
          prizeId: list.id
        })
      } else {
        this.prizeLists = { ...this.defaultPrizeList }
      }
    },
    // 返回按钮
    cancel() {
      this.$router.go(-1)
      // let query = {
      //   mId: this.$route.query.mId
      // }
      // this.$router.replace({ name: this.backPage, query: query })
    },
    handleClick(tab, event) {
      let tabName = 'allocatedManage'
      if (tab.name === tabName) {
        let i = this.tabList.findIndex((item) => item.name === tabName)
        this.$refs.comTab[i].getPrizeId()
      }
      this.$refs.comTab.forEach((item, index) => {
        item.resetIsSave()
      })
    },
    /*tab切换*/
    changeLab(labName) {
      this.activeName = labName
    },
    /*手机页面切换*/
    changePhone(pageName) {
      this.phonePage = pageName
    }
  }
}
</script>
<style lang="less">
#createActiveList {
  .el-row {
    padding-top: 15px;
  }
  .phone-box {
    float: left;
    width: 283px;
    height: 650px;
    background-image: url('~@/assets/img/phone.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 30px;
    .page-phone {
      width: 265px;
      height: 450px;
      margin: 80px auto;
      background-color: #fff;
    }
  }
  .el-tab-pane {
    padding-top: 15px;
  }
  .btn-box {
    text-align: right;
    padding: 10px 0;
    button {
      width: 90px;
      height: 26px;
    }
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    margin-left: 30px !important;
  }
  .el-tabs {
    margin: 0 20px 0 20px !important;
  }
  .el-tabs__item.is-active {
    height: 41px;
    color: #0d1636 !important;
    border-top: 2px solid #1dc8a4;
  }
  .el-tabs__item:hover {
    color: #1dc8a4 !important;
  }
  .el-form-item__content {
    .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    @import url('~@common/style/textarea.less');
  }
  .el-form-btn {
    -webkit-box-shadow: 0px 0px 4px 0px #cfd9ee;
    box-shadow: 0px 0px 4px 0px #cfd9ee;
    position: absolute;
    width: 100%;
    bottom: 0%;
    height: 50px;
    margin-bottom: 0;
    .el-form-item__content {
      margin-right: 60px;
      float: right;
      line-height: 50px;
      .el-button {
        padding: 5px 30px;
      }
    }
  }

  .img-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 260px;
    height: 130px;
    border: 1px solid #eee;
    background: #eee;

    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  .table-conBtn {
    padding-left: 0;
  }
}
</style>
